<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="wrap">

<head>
	<meta charset="UTF-8">
	<title>virtualMachineClass</title>
	<link rel="stylesheet" href="css/pc/cores/style.css" />
	<link rel="stylesheet" href="css/public/fh.css" />
	<link rel="stylesheet" href="css/public/list.css" />
	<link rel="stylesheet" href="css/pc/cores/alert.css" />
	<link rel="stylesheet" href="css/pc/modules/virtualMachineClass.css" />
	<link rel="stylesheet" href="css/pc/modules/endClassList.css" />
	<style>
		input::-webkit-clear-button { visibility: hidden; }
		input[type=date]::-webkit-inner-spin-button { visibility: hidden }
		input[type=time]::-webkit-inner-spin-button{
			visibility: hidden
		}
		input[type=time]::-webkit-clear-button{ display:none; }
		input[type=date],input[type=time]{
			height: 34px;
			border: 1px solid #dfdfdf;
			border-radius: 5px;
			padding-left: 12px;
			font-size: 14px;
			padding-right: 7px;
			color: #333;
			line-height: 34px;
		}
		input[type=checkbox]{
			margin-right: 5px;
			vertical-align: -1px;
		}
		.count{
			padding: 20px;
		}
		.seld{
			width: 100px;
			height: 34px;
			border: 1px solid #dfdfdf;
			line-height: 34px;
			padding-left: 8px;

		}
		.submit{
			margin: 20px auto;
			background: #C82011;
			width: 100px;
			height: 34px;
			line-height: 34px;
			color: #fff;
			font-size: 16px;
			text-align: center;
			border-radius: 5px;
			cursor: pointer;

		}
		.place{
			background: #C82011;
			width: 90px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 16px;
			border-radius: 5px;
			cursor: pointer;
			display: inline-block;
			margin-left:20px
		}
		.map{
			display: none;
			position: relative;
			margin-left: 20px;
		}
		#inputSearch{
			position: absolute;
			width: 210px;
			height: 35px;
			line-height: 35px;
			padding-left: 20px;
			z-index: 99;
			top: 20px;
		}


	</style>
</head>

<body>
<!--面包屑-->
<div class="crumbs">
	<div class="index-img"></div>
	<a href="javascript:void(0)" id="myPage">首页</a><label>></label>
	<a href="javascript:void(0)" class="endM">班级管理</a><label>></label>
	<a href="javascript:void(0)">手机考勤</a>
</div>
<!-- 标题 -->
<div class=" ">
	<div class="title_nav">
		<div class="title_box_select fl" id="table_one">手机考勤</div>
		<div class="xxtz" id="fanhui"><a href="javascript:void(0)" class="returnA">返回</a></div>
	</div>
	<div class="main">
		<div class="funBox">
			<p>手机考勤设置</p>
			<p class="count"><span>手机考勤:&ensp;&ensp;&ensp;<input type="date" class="datestart"></span>&ensp;&ensp;
				<span>结束周期:&ensp;<input type="date" class="datesend"></span>
			</p>

			<p class="count"><span>考勤时段:&ensp;&ensp;&ensp;<input type="time" class="timestart" ></span>&ensp;&ensp;
				<span>结束时间:&ensp;<input type="time" class="timeend" placeholder="结束时间"></span>
			</p>
			<p class="count">
				考勤星期:&ensp;&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期一">星期一</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期二">星期二</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期三">星期三</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期四">星期四</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期五">星期五</label>&ensp;&ensp;
				<label><input type="checkbox"  name="week" value="星期六">星期六</label>&ensp;&ensp;
				<label><input type="checkbox" name="week" value="星期日">星期日</label>
			</p>
<%--			<p class="count">考勤范围:&ensp;&ensp;&ensp;--%>
<%--				<select class="seld">--%>
<%--					<option value="100">100</option>--%>
<%--					<option value="200">200</option>--%>
<%--					<option value="300">300</option>--%>
<%--					<option value="500">500</option>--%>
<%--				</select>--%>
<%--			</p>--%>
         <p class="count">
			<p class="fl" style="margin-right: 10px;margin-left: 22px;">
			    考勤范围:&ensp;&ensp;&ensp;
				<select class="seld">--%>
						<option value="100">100</option>
						<option value="200">200</option>
						<option value="300">300</option>
						<option value="500">500</option>
				</select>
			</p>
			<p class=" countplace fl">

			</p>
		</p>

			<div class="map" style="margin-top: 56px">
				<input type='text' id="inputSearch" placeholder='请输入考勤地点'>
				<div id='container' style='width:650px; height:350px'> </div>
			</div>
			<p class="submit">保存</p>

	   </div>
	<div class="clear"></div>

</div>
</div>
</div>
</div>

<script type="text/javascript" src="js/public/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/public/frame.js"></script>
<script type="text/javascript" src="js/public/jquery.page.js"></script>
<script type="text/javascript" src="js/pc/cores/delogin.js"></script>
<script type="text/javascript" src="js/pc/cores/noticeShow.js"></script>
<script type="text/javascript" src="js/pc/cores/Alert.js"></script>
<%--<script type="text/javascript" src="js/pc/modules/phone.js"></script>--%>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=1c42917d4f8f616b021660159bcc1e64"></script>
<script>
	var result = '${result}';
	result = JSON.parse(result);
	console.log(result.paramData.courseId,444)
</script>
<script>

	$(function(){
		var map, marker,longitude,latitude,switchOn,flag;
		let infos = []
		var baseTable=[];
		let self = this
		var confirm1 = new Confirm;
		var Alert1 = new Alert;
		var Alert2 = new Alert;
		var loading1 = new Loading();//监控全局ajax添加loading
		loading1.init();

		get()
		//获取值
		function get(){
			$.ajax({
				type: "get",
				url: "attendance-mobile/config?classId="+result.paramData.classId+"&courseId="+result.paramData.courseId,
				contentType:"application/json;charset=utf-8",
				success: function(data, status, xhr) {
					if(data.code == 200) {
						switchOn = data.data.switchOn;
						if (data.data.startTime != null) {
							$('.datestart').val(data.data.startTime)
						}
						if (data.data.endTime != null) {
							$('.datesend').val(data.data.endTime)
						}
						if (data.data.info != null && data.data.info != undefined && data.data.info.length > 0 ) {

							for (let i = 0; i < data.data.info.length; i++) {
								//设置时间
								$('.timestart').val(data.data.info[0].startTime)
								$('.timeend').val(data.data.info[0].endTime)
								//距离
								$('.seld').val(data.data.info[0].distance)
								//星期

								$("input[name='week'][value=" + data.data.info[i].week + "]").attr("checked", true);
								//经纬度
								if(data.data.info[0].longitude != null && data.data.info[0].longitude != undefined){
									longitude = data.data.info[0].longitude
									latitude = data.data.info[0].latitude

									$('.countplace').html('考勤地点:&ensp;<span class="place">修改地点</span>')
								}else {
									$('.countplace').html('考勤地点:&ensp;<span class="place">设置地点</span>')
								}

							}

						} else {

							$('.countplace').html('考勤地点:&ensp;<span class="place">设置地点</span>')
						}

					}


				},
				error: function(data, status, xhr) {
					//loading1.hide();
					var json = JSON.stringify({
						"pageName": "error"
					});


				}
			});
		}
		$(".endM").click(function() {
			window.location.href = 'skipTeaEndClassList?jsonStr={"pageNow":1,"pageSize":10}'
		});
		$("#myPage").click(function() {
			overdue(),
					window.location.href = "skipMyPage"
		});
		//点击保存
		$('.submit').click(function() {

			loading1.show();
			//经纬度
			if(longitude ==  undefined || latitude == undefined){
				loading1.hide();
				Alert1.content = "请输入位置";
				Alert1.init();
				Alert1.show();
				return;
			}
			var  obj = document.getElementsByName("week");

			for(let i=0;i<obj.length;i++){
				if(obj[i].checked){
					console.log(obj[i]);
					baseTable.push(obj[i].value);
				}
			}
			console.log(baseTable.length,11)
			//是否为空
			if($('.datestart').val() == ''){
				loading1.hide();
				Alert1.content = "请输入手机考勤日期";
				Alert1.init();
				Alert1.show();
				return
			}
			if($('.timestart').val() == '' || $('.timeend').val() == '' ){
				loading1.hide();
				Alert1.content = "请输入手机考勤时段";
				Alert1.init();
				Alert1.show();
				return;
			}
			if(flag){
				loading1.hide();
				Alert1.content = "请输入位置";
				Alert1.init();
				Alert1.show();
				return
			}

			// var ids = [];
			//
			// $("input[name='week']:checked").each(function(i){
			// 	ids = [];
			// 	ids.push($(this).val())
			//
			//
			// })

			if(baseTable.length <= 0){
				loading1.hide();
				Alert1.content = "请输入手机考勤星期";
				Alert1.init();
				Alert1.show();
				return;
			}
			console.log(baseTable,858)
			for(let i =0; i<baseTable.length; i++){

				let json = {}
				json.week = baseTable[i]
				json.distance = $('.seld').val()
				json.endTime = $('.timeend').val()
				json.startTime = $('.timestart').val()
				json.position = ''
				json.longitude =longitude
				json.latitude =latitude
				infos.push(json)
			}



			var parameter = {
				"endTime": $('.datesend').val(),
				"startTime": $('.datestart').val(),
				"courseId":result.paramData.courseId,
				"classId" :result.paramData.classId,
				"info" :infos,
				"switchOn" :switchOn
			};
			$.ajax({
				type: "post",
				url: "attendance-mobile/config/update",
				contentType:"application/json;charset=utf-8",
				async: true,
				data: JSON.stringify(parameter),
				success: function(data, status, xhr) {
					loading1.hide();
					if(data.code == 200){
						loading1.hide();
						//跳转
						var json = JSON.stringify({
							"pageName": "pc/phone",
							"paramData": {
								"courseId": result.paramData.courseId,
								"classId": result.paramData.classId,

							}
						});

						window.location.href = "skipPage?jsonStr=" + json;
					}
				},
				error: function(data, status, xhr) {
					//loading1.hide();
					var json = JSON.stringify({
						"pageName": "error"
					});


				}
			});

		})

		//点击设置地点
		$('body').on('click','.place',function(){
			baseTable = []
			console.log(baseTable.length,4111)
			//弹出地图
			$('.map').show()
			//地图
			map = new AMap.Map('container', {
				resizeEnable: true,
				zoom: 14,
			})
			map.on('click', function(e) {
				map.clearMap();
				marker = new AMap.Marker({
					map : map,
					position : [ e.lnglat.getLng(), e.lnglat.getLat() ]
				});

			});

			search();
			// 查询
			function search(){
				AMap.plugin([ 'AMap.Autocomplete', 'AMap.PlaceSearch' ],
						function() {
							var autoOptions = {
								city : "北京", //城市，默认全国
								input : "inputSearch"//使用联想输入的input的id
							};
							autocomplete = new AMap.Autocomplete(autoOptions);
							var placeSearch = new AMap.PlaceSearch({
								city : '北京',
								map : map,
								pageSize:1,
								pageIndex:1
							})
							AMap.event.addListener(autocomplete, "select",
									function(e) {
										// alert(JSON.stringify(e.poi))
										if(e.poi.location == undefined){
											flag = true
											Alert1.content = "未检索到该位置";
											Alert1.init();
											Alert1.show();
											return
										}
										console.log(e,121)
										//console.log(e.poi.location.lng,888)
										//console.log(e.poi.location.lat,77)
										flag = false
										longitude = e.poi.location.lng
										latitude = e.poi.location.lat
										//TODO 针对选中的poi实现自己的功能
										placeSearch.setCity(e.poi.adcode);
										placeSearch.search(e.poi.name);
									}
							);
						});
			}

		})

		//点击上一页
		$('#fanhui').click(function(){
			var json = JSON.stringify({
				"pageName": "pc/phone",
				"paramData": {
					"courseId": result.paramData.courseId,
					"classId": result.paramData.classId,

				}
			});
			window.location.href = "skipPage?jsonStr=" + json;
		})
	});


</script>
</body>

</html>